<template>

  <div class="labelListRadio">
    <div class="float_right width_50px pointer more" @click="toggleMore">
      更多
    </div>

    <div class="margin_right_50 label_container">
      <ul class="label_ul" :class="{show_one_line:isShowMore}">
        <li class="label_ul_li" @click="selectLabel(key,$event)" v-for="(item,key) in labelList">
          <span :class="{active: key==activeIndex}">{{item.MName}}</span>
        </li>
      </ul>
      <div class="clear_both"></div>
    </div>

  </div>

</template>
<script>

  export default {
    props:[
        "levelListData"
    ],
    data: function () {
      return {
        // 当前选中的索引
        activeIndex : 9999999,
        // 是否显示所有,默认是不显示所有的，及超过一行，则隐藏
        isShowMore: true,
      }
    },
    computed: {
        labelList: function(){
            if(this.levelListData===undefined || this.levelListData.length == 0){
                return [];
            }else{
                return this.levelListData;
            }
        }
    },
    // 组件初始化完成执行的方法
    mounted: function () {
        // 默认选择第一个列表
//        this.selectLabel(0);
        this.activeIndex = 0;
        this.$emit("init",this.labelList[key],key);
    },
    methods: {
        // 点击选中的标签
      selectLabel: function(key,myevent){
          this.activeIndex = key;
          this.$emit("select-label",this.labelList[key],key);
      },
      // 切换是否显示更多
      toggleMore : function(){
          this.isShowMore = !this.isShowMore;
      }
    }
  }
</script>

<style scoped lang="scss">
  .labelListRadio {
      .more{
          position: relative;
          z-index: 99;
      }

    line-height: 35px;
      .label_container{
          position: relative;
          background: #fafafa;
          padding: 0 20px;
          margin: 20px 0;

          .label_ul{
              list-style: none;

              &.show_one_line{
                  height: 35px;
                  overflow: hidden;
              }

              .label_ul_li{
                  cursor: pointer;
                  float: left;
                  margin-right: 15px;

                  span{
                      &:hover{
                          /*color:red;*/
                      }
                      &.active{
                          background: #6dcef0;
                          padding: 3px 10px;;
                          border-radius: 2px;
                          color: #fff;
                      }
                  }
              }

          }
      }


  }
</style>
